<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节点创建删除，元素属性设置获取，节点属性</title>
    <style>
        .content {
            width: 80%;
            margin: 20px auto;
        }

        .box {
            background-color: antiquewhite;
            height: 200px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- <a href="">我是超链接</a>
    <div>
        <h1></h1>
        <p></p>
    </div>
    <ul id="list">

    </ul> -->

    <div class="content">
        <ul>
            <li>创建元素 createElement</li>
            <li>为div添加元素 innerHTML</li>
            <li>创建文本节点 createTextNode</li>
            <li>增加子元素 appendChild</li>
            <li>创建注释节点 createComment</li>
        </ul>
        <button class="button1">创建元素 createElement</button>
        <div class="box">

        </div>
    </div>
    <div class="content">
        <ul>
            <li>增加在父元素的子节点列表的最后一个</li>
        </ul>
        <button class="button2">创建元素，最后插入</button>
        <button class="button3">appendChild剪切</button>
        <div class="box box1">
            <a href="#">剪切</a>
        </div>
    </div>
    <div class="content">
        <ul>
            <li>在父级节点a和子节点b之间插入c</li>
        </ul>
        <button class="button4">插入insertBefore</button>

        <div class="box box3">
            <SPAN class="node1">节点A</SPAN>
            <SPAN class="node2">节点B</SPAN>
        </div>
    </div>
    <div class="content">
        <ul>
            <li>两种删除节点的方法</li>
        </ul>
        <button class="button5">删除节点removeChild</button>
        <button class="button6">删除节点remove</button>
        <div class="box box4">
            <SPAN class="node3">节点A</SPAN>
            <SPAN class="node4">节点B</SPAN>
        </div>
    </div>
    <div class="content">
        <ul>
            <li>innerHTML和innerText</li>
            <li>console.log(oSpan.innerText); 返回节点值</li>
            <li>oSpan.innerHTML='12123'; 解析HTML，覆盖节点</li>
        </ul>
        <button class="button7">innerHTML</button>
        <button class="button8">innerText</button>
        <div class="box box4">

            <SPAN class="node5">节点A</SPAN>
            <SPAN class="node6">节点B</SPAN>
        </div>
    </div>
    <div class="content">
        <ul>
            <li>innerHTML和innerText</li>

        </ul>
        <button class="button9">创建</button>
        <button class="button10">createDocumentFragment</button>
        <div class="box box4">
            <ul id="list">

            </ul>
        </div>
    </div>
    <script>
        // 创建元素 createElement
        // 在Document.prototype上存在
        // 创建一个标签名为div的元素
        var oButton = document.getElementsByClassName('button1')[0];
        oButton.addEventListener('click', function () {
            let oDiv = document.getElementsByClassName('box')[0];
            var div = document.createElement('div')
            //为div添加元素 innerHTML
            div.innerHTML = 123;
            // 增加子元素 appendChild
            oDiv.appendChild(div);
            // 创建文本节点  createTextNode
            var text = document.createTextNode('我艾米');
            oDiv.appendChild(text)
            // 创建注释节点 createComment
            var comment = document.createComment('我是注释');
            oDiv.appendChild(comment)
        }, false);

        // 增加子节点 appendChild
        //增加在父元素的子节点列表的最后一个
        // 在Node.prototype上
        let oButton1 = document.getElementsByClassName('button2')[0];
        oButton1.addEventListener('click', function () {
            let a = document.getElementsByTagName('a')[0];
            let oDiv = document.getElementsByClassName('box1')[0];
            var div = document.createElement('div');
            div.innerHTML = '<p>我是段落标签</p>'
            oDiv.appendChild(div);

        }, false)
        let oButton2 = document.getElementsByClassName('button3')[0];
        oButton2.addEventListener('click', function () {
            let a = document.getElementsByTagName('a')[0];
            let oDiv = document.getElementsByClassName('box1')[0];
            //appendChild不仅可以增加，还可以剪切节点
            console.log(oDiv.appendChild(a));
        }, false)

        // c.insertBefore(a,b)
        // 在父级节点c和子节点b之间插入a
        let oButton3 = document.getElementsByClassName('button4')[0];
        oButton3.addEventListener('click', function () {
            let a = document.getElementsByClassName('box3')[0];
            let b = document.getElementsByClassName('node2')[0];
            var c = document.createElement('a');
            c.href = '';
            c.innerHTML = '节点c'
            a.insertBefore(c, b);
        })


        // 父节点.removeChild(子节点)
        // 在node下
        // 这个节点被剪切出来了，并没有真正的销毁
        // console.log(div.removeChild(p));
        // 元素-》构造函数实例化               -》  div对象节点
        //   通过new HTMLDivElement()     removerChild(div)    
        //   创建div DOM对象                   只能删除节点，并不能删除内存中
        // 存到了内存中

        // e.remove() 直接在内存中将DOM对象删除
        let oButton4 = document.getElementsByClassName('button5')[0];
        let oButton5 = document.getElementsByClassName('button6')[0];
        oButton4.addEventListener('click', function () {
            let oSpan = document.getElementsByClassName('node3')[0];
            let oDiv = document.getElementsByClassName('box4')[0];
            console.log(oDiv);
            oDiv.removeChild(oSpan);
        }, false)
        oButton5.addEventListener('click', function () {
            let oSpan = document.getElementsByClassName('node4')[0]
            oSpan.remove();
        }, false)


        // innerHTML  innerText
        // 在HTMLElement.prototype上面
        // innerHtml在Element.prototype上
        let oButton7 = document.getElementsByClassName('button7')[0];
        let oButton8 = document.getElementsByClassName('button8')[0];
        let i = 1;
        oButton7.addEventListener('click', function () {
            let oSpan = document.getElementsByClassName('node5')[0];
            oSpan.innerHTML = 'innerHtml' + i;
            // 获取值
            console.log(oSpan.innerHTML);
            // 添加值，覆盖之前的值
            // div.innerHTML = 'innerHTML添加'
            // 通过字符串，追加值
            // div.innerHTML += 'innerHTML追加'
            // 解析HTML
            // div.innerHTML = '<p>段落标签</p>'
        }, false);
        oButton8.addEventListener('click', function () {
            let oSpan = document.getElementsByClassName('node6')[0];
            oSpan.innerText = 'innerText';
            console.log(oSpan.innerText);
        }, false);
        let oButton9 = document.getElementsByClassName('button9')[0];
        let oButton10 = document.getElementsByClassName('button10')[0];

        var list = document.getElementById('list'),
            item,
            data = [
                {
                    title: '天下无贼',
                    area: '中国'
                },
                {
                    title: '复仇者联盟',
                    area: '美国'
                }, {
                    title: '天下无贼',
                    area: '美国'
                }
            ]
        oButton9.addEventListener('click', function () {
            for (let i = 0; i < data.length; i++) {
                item = data[i];
                var li = document.createElement('li'),
                    h2 = document.createElement('h2'),
                    p = document.createElement('p');
                h2.innerHTML = '电影名称: ' + item.title;
                p.innerHTML = '地区' + item.area;
                li.appendChild(h2);
                li.appendChild(p)
                list.appendChild(li)
            }
        })
        oButton10.addEventListener('click', function () {
            // document.createDocumentFragment()
            // 创建文档碎片，是存在内存上的，不在Dom树上
            var oUl = document.getElementById('list');
            var oFrag = document.createDocumentFragment();
            for (let i = 0; i < 100; i++) {

                var oLi = document.createElement('li');
                oLi.innerHTML = i + '这是第' + i + '个项目';
                oLi.className = 'list-item';
                // 频繁触发回流
                //    oUl.appendChild(oLi);
                //将结构放在文档片段上
                oFrag.appendChild(oLi);
            }
            // 添加到DOM树上
            oUl.appendChild(oFrag);
        })
        // parent.replaceChild(new,origin)
        // 新的节点替换旧的节点

        // innerText 只解析文本，不解析HTML标签
        //setAttribute  元素添加属性，和属性值
        div.setAttribute('id', 'box');

        // dataset.name.


    </script>
</body>

</html>